<template>
  <Header @close="closeFun" @submit="submit" @reset="reset" @uncheck="uncheck" @previewPage="previewPage"></Header>
  <div class="flex">
    <!-- 卡片区域 -->
    <VueDraggable v-model="dList" :animation="150" :group="{ name: 'people', pull: 'clone', put: false }" :sort="false" class="templateLeft" :clone="clone">
      <div v-for="item in dList" :key="item.id" class="templateLeftItem">
        <span class="templateName">{{ item.name }}</span>
        <span class="dragAndDropCopy">{{ tc('拖拽放置区') }}</span>
      </div>
    </VueDraggable>
    <!-- 内容 -->
    <div class="dragContent">
      <LowCodeHeader></LowCodeHeader>
      <VueDraggable v-model="placeList" :animation="150" group="people" class="templateRight scrollbar_app" @add="handleAdd">
        <div v-for="item in placeList" :key="item.id" @click.capture="bindTop(item)">
          <!-- 轮播图控件 -->
          <Banner v-if="item.type == 'Banner'" :itemData="item" :del="del"></Banner>
          <!-- 图片控件 -->
          <Image v-else-if="item.type == 'Image'" :itemData="item" :del="del"></Image>
          <!-- 表单控件 -->
          <FormControls v-else-if="item.type == 'Form'" :itemData="item" :del="del"></FormControls>
          <!-- 6个小功能控件 -->
          <Catr v-else-if="item.type == 'Cart'" :itemData="item" :del="del"></Catr>
          <!-- 人物介绍控件 -->
          <Persona v-else-if="item.type == 'Persona'" :itemData="item" :del="del"></Persona>
        </div>
      </VueDraggable>
    </div>
    <!-- 设置属性区域 -->
    <lowCodeRight></lowCodeRight>
  </div>
</template>

<script lang="ts" setup>
import Header from '../header/index.vue';
import Banner from '@/pages/lowCode/components/lowCodeAdd/lowCodeContent/banner/index.vue';
import Image from '@/pages/lowCode/components/lowCodeAdd/lowCodeContent/lowImage/index.vue';
import Catr from '@/pages/lowCode/components/lowCodeAdd/lowCodeContent/cart/index.vue';
import LowCodeHeader from '@/pages/lowCode/components/lowCodeAdd/lowCodeContent/lowCodeHeader/index.vue';
import FormControls from '@/pages/lowCode/components/lowCodeAdd/lowCodeContent/formControls/index.vue';
import Persona from '@/pages/lowCode/components/lowCodeAdd/lowCodeContent/persona/index.vue';
//以上都是控件
import { Md5 } from 'ts-md5';
import { ref } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
import { tc } from '@/locales/index';
import { storeToRefs } from 'pinia';
import { lowCode } from '@/store/modules/lowCode';
import lowCodeRight from '@/pages/lowCode/components/lowCodeAdd/lowCodeRight/index.vue';
const lowCodeStore = lowCode();
const { draggableList } = storeToRefs(lowCodeStore);
const dList = ref<any>(draggableList);
const placeList = ref<any>([]);
let placeTheItem = ref({});
const emit = defineEmits(['closeTamplat']);
// 放置区的方法
const clone = (element: any) => {
  const md5: any = new Md5();
  md5.appendAsciiStr(`${new Date().getTime()}-${placeList.value.length}`);
  const id = md5.end();
  let item = {
    ...element,
    id,
  };
  placeTheItem.value = item;
  return item;
};
// 放置成功 console.log(event, "放置成功")
const handleAdd = () => {
  lowCodeStore.acItem(placeTheItem.value);
};
// 点击出现蒙层
const bindTop = (item: any) => {
  lowCodeStore.acItem(item);
};
// 删除某一项的内容
const del = (item: any) => {
  placeList.value.forEach((element: any, index: any) => {
    if (element.id == item.id) {
      placeList.value.splice(index, 1);
      lowCodeStore.acItem({});
    }
  });
};
// 关闭当前的弹框
const closeFun = () => {
  emit('closeTamplat');
};
// 提交模板
const submit = () => {
  console.log(placeList.value);
};
// 重置模板
const reset = () => {
  placeList.value = [];
  lowCodeStore.acItem({});
};
//取消选中
const uncheck = () => {
  lowCodeStore.acItem({});
};
// 预览模板
const previewPage = () => {
  console.log('预览模板');
};
</script>

<style lang="scss">
.flex {
  display: flex;
  width: 100%;
  height: calc(100vh - 60px);
  background-color: $bgc-grey;
  flex-wrap: wrap;

  .templateLeft {
    width: 300px;
    height: calc(100vh - 80px);
    margin-top: 10px;
    background-color: $white;
    border-radius: 0px 10px 10px 0px;
    padding-top: 10px;

    .templateLeftItem {
      width: 80px;
      height: 30px;
      border: 1px solid var(--el-color-primary);
      border-radius: 5px;
      margin: 0px 8px 8px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--el-color-primary);
      font-size: 12px;
      float: left;
      cursor: pointer;

      .dragAndDropCopy {
        display: none;
      }

      .templateName {
        display: block;
      }
    }
  }

  .dragContent {
    width: calc(100% - 640px);
    height: calc(100vh - 80px);
    background-color: $white;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 10px;
    overflow-y: auto;
    padding: 2px;
  }

  .templateRight {
    width: 100%;
    height: calc(100vh - 140px);
    background-color: $white;
    border-radius: 3px;
    margin: 0 auto;
    overflow-y: auto;

    .templateRightItem {
      border-radius: 10px;
      opacity: 0.8;
      color: var(--el-color-primary);
    }
  }
}

.templateRight .sortable-chosen {
  //这个css 要和 这个templateLeftItem 类名的样式一样
  border-radius: 10px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  .templateName {
    display: none;
  }

  .dragAndDropCopy {
    height: 60px;
    line-height: 60px;
    display: block;
    text-align: center;
    color: var(--el-color-primary);
  }
}

.justify-between {
  display: flex;
  justify-content: space-between;
}
</style>
